<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@include file="include.jsp" %>
<title>Insert title here</title>
</head>
<body>
all的简单用法<br />
<div class='outer' id='s'>
        <div class='item'>
            item1
        </div>
    </div>
    
    <div class='outer'>
        <div class='item'>
            item2
        </div>
    </div>
    
    <div class='item'>
        item3
    </div>
    
    
    <button>$(".item")</button>
    <button>$(".outer").all(".item")</button>
    <button>$("#s").all(".item")</button>
    
<script>
    KISSY.ready(function(S){
      	S.use("core",function(){
      	  var $=S.all;  //属于node模块
          $("button").on("click",function(){
              $("div").css("color","");
              var el=$(this);
              var content=el.html();
              eval(content).css("color","red");
          });
      	})
    });
    
</script>
<hr />
all与one<br />
<ul>
<li class="ite">这个是测试1</li>
<li class="ite">这个是测试2</li>
<li class="ite">这个是测试3</li>
<li class="ite">这个是测试4</li>
</ul>
<a  href = "" class="hover">新加入</a>
<script type="text/javascript">
(function(S){
    S.use("node",function(s,N){
        var _N = N.all('.ite');    
        console.log(typeof _N);
        var _a = N.one('.hover');
        
        var _css = function(){
          _a.css({color:'red',fontWeight:'bold',fontSize:'28px'})    
        };
        
        _N.on('click',function(){
            _N.show(2,_css);//当前结点元素以2S动画效果显示,动画结束后,回调_css函数
        }) ;   
    })
    
})(KISSY);


KISSY.use("node",function(S,node){
	DESKSOFT.k5.node  = node ;
})


DESKSOFT.k5 = {
		node : null ,
		width : function(){
			var t = this.node.all(window).width();
			var t1 = this.node.all(window).height();
			alert("width:"  +　t + " 　height：" + t1)
		},
		hight : function(){
			var t1 = $(window).height();
			var t = $(window).width();
			alert("width:"  +　t + " 　height：" + t1)
		},
		kInsertAfter : function() {
			this.node.one("<p>after</p><p>iiiiiiiiiiiiiiiiii</p>").insertAfter("#div")
		},
		jInsertBefore : function(){
			$("<p>before</p>").insertBefore("#div");
		}
}
</script>
<hr />
width与hight<br />

<input type="button" onclick="DESKSOFT.k5.width();" value="KISSY -- width  height">
<input type="button" onclick="DESKSOFT.k5.hight();" value="Jquery --width  hight"><br />
<hr />
<input type="button" value="kissy insertAfter" onclick="DESKSOFT.k5.kInsertAfter();">
<input type="button" value="jQuery insertBefore" onclick="DESKSOFT.k5.jInsertBefore();">
 <br /><br />
 <div>
 	<div id="div">---------------------</div>
 </div>
</body>
</html>